<template>
  <div>
    <div class="user-mes" :style="{width: '100%', height: '110px'}">
      <!--用户信息-->
        <div style="background: #7fdbda;width: 31%;height: 100%">
          <i class="el-icon-user-solid"></i>
          <span>总用户数量：300</span>
        </div>
        <div style="background: #848ccf;width: 31%;height: 100%">
          <i class="el-icon-s-custom"></i>
          <span>用户数：{{this.student}}</span>
        </div>
        <div style="background: #F56C6C;width: 31%;height: 100%">
          <i class="el-icon-s-check"></i>
          <span>教职工数：66</span>
        </div>
    </div>
    <div class="charts">
      <div id="file-borrow2" :style="{width: '1200px', height: '400px'}">
        <h1 style="font-size: 40px;margin-left: 40px;margin-right: 50px">
          本系统是对居民的一个在线档案管理系统，对用户信息、健康档案、健康史、记录平日运动、健身指标分析等进行在线维护与管理。
        </h1>
        <br>
        <h1 style="font-size: 40px;margin-left: 90px;margin-right: 50px">
         主要功能如下：
        </h1>
        <br>

        <h4 style="font-size: 25px;margin-left: 140px;margin-right: 50px">
         ~基础用户信息维护。 <br>
         ~居民档案基本信息管理。 <br>
         ~健康史维护管理。 <br>
         ~日常健康运动记录。 <br>
         ~健身项目与测评管理。 <br>
         ~健康误区。 <br>
         ~健康分析等等。 <br>


        </h4>

        <br>
        <br>

      </div>
      <!--就业信息-->
      <div id="stu-jobs" :style="{width: '600px', height: '400px'}"></div>
    </div>
  </div>

</template>

<script>
    export default {
        name: "firstPage",
        data(){
          return {
            student:234,
            list:[30.3, 20.5, 56.8, 60.9, 90, 80]
          }
        },
      mounted(){
        this.drawLine();
      },
      methods: {
        drawLine(){
          var self = this;

          //就业信息
          let jobs = this.$echarts.init(document.getElementById('stu-jobs'));
          jobs.setOption({
            title: {
              text: '就业信息详情',
              textStyle: {
                color:'#777'
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              },
              formatter: function (params) {
                //console.log(params[0]); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
                let firstParams = params[0];
                return '专业名称：'+firstParams.name + '<br>' + firstParams.seriesName + '：' + firstParams.data +' %';
              }
            },
            xAxis: {
              data: ["计算机","化学","文学","口播","英语","新闻"]
            },
            yAxis: {},
            series: [{
              name: '就业率',
              type: 'bar',
              data: this.list
            }]
          });

        }
      }
    }
</script>

<style scoped>
  /*图表*/
  .charts{
    padding-top: 20px;
    display: flex;
    justify-content: space-evenly;
  }
  /*顶层div*/
  .user-mes{
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
  }
  /*用户数的单个div*/
  .user-mes div{
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .user-mes span{
    font-size: 18px;
    color: white;
  }
  /*图标大小*/
  .el-icon-s-check,.el-icon-user-solid,.el-icon-s-custom{
    font-size: 40px;
    margin-right: 15px;
    color: white;
  }
</style>
